<template>
  <div class="app-container">
    <div class="block">
      <span class="demonstration">选择年份</span>
      <el-date-picker
        type="year"
        placeholder="2020"
      />
    </div>

    <el-card shadow="always" class="content">
      <span>已选课程</span>
      <el-table
        style="width: 100%"
        :data="theses"
      >

        <el-table-column
          prop="title"
          label="课题名称"
        />

        <el-table-column
          prop="teacher"
          label="老师"
          width="120"
        >
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content">
                <p>手机号：{{ scope.row.teacher.phone }}</p>
                <p>qq：{{ scope.row.teacher.qq }}</p>
              </div>
              <el-tag type="text" @click="onViewteacher(scope.row.id)">
                {{ scope.row.teacher.name }}
              </el-tag>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          prop="created"
          label="创建时间"
          width="230"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ new Date(scope.row.created).toLocaleString() }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="a"
          label="课程详情"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="onViewDetails(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="numApplied"
          label="已选人数"
          width="100"
        />

        <el-table-column
          prop="status"
          label="课题状态"
          width="120"
        >
          <template>
            <el-tag type="success">选定中</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="onDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card shadow="always" class="chose">
      <span>可选课程</span>
      <el-table
        style="width: 100%"
        :data="totheses"
      >
        <el-table-column
          prop="title"
          label="课题名称"
        />

        <el-table-column
          prop="teacher"
          label="老师"
          width="120"
        >
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content">
                <p>手机号：{{ scope.row.teacher.phone }}</p>
                <p>qq：{{ scope.row.teacher.qq }}</p>
              </div>
              <el-tag type="text" @click="onViewteacher(scope.row.id)">
                {{ scope.row.teacher.name }}
              </el-tag>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          prop="created"
          label="创建时间"
          width="230"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ new Date(scope.row.created).toLocaleString() }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="a"
          label="课程详情"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="onViewDetails(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="numApplied"
          label="已选人数"
          width="100"
        />

        <el-table-column
          prop="status"
          label="课题状态"
          width="120"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '0'" type="success">选定中</el-tag>
            <el-tag v-else type="danger">已选定</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="操作"
          width="120"
        >
          <template
            v-if="scope.row.status === '0' && scope.row.numApplied != '3' "
            slot-scope="scope"
          >
            <el-button
              v-show="isbntVisible"
              type="primary"
              size="small"
              @click="onChose(scope.row.id)"
            >
              选课
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[5, 10, 20]"
        :current-page="currentPage"
        :page-size="pagesize"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog
      :title="thesis.title"
      :visible.sync="isDialogVisible"
    >
      <div v-loading="contentLoading">
        {{ thesis.content || '' }}
      </div>
      <el-button
        slot="footer"
        type="primary"
        @click="isDialogVisible = false"
      >
        确 定
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getstuTheses, getThesesById, getstuToTheses, choseTheses, deleteTheses } from '@/api/theses'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      theses: [],
      totheses: [],
      thesis: {},
      isDialogVisible: false,
      contentLoading: false,
      isbntVisible: true,
      currentPage: 1, //  el-pagination 初始页
      pagesize: 5, //  el-pagination 每页的数据
      total: 0
    }
  },

  // 计算属性
  computed: {
    // sid() {
    //   return this.$store.state.user.sid
    // }
    ...mapGetters(['sid'])
  },

  // 侦听属性
  watch: {
    isDialogVisible(value) {
      console.log('watch:', value)
      if (value) {
        getThesesById(this.thesisId).then(res => {
          this.thesis = res.data.data
        })
      }
    }
  },

  created() {
    console.log('sid:', this.sid)
    // id要改
    this.loadData()
  },

  methods: {
    onViewteacher(id) {
      console.log('onViewteacher', id)
    },

    onViewDetails(id) {
      this.thesisId = id
      // 发送请求，获取课题详情
      // this.contentLoading = true

      // 弹出对话框，显示课题详情
      this.isDialogVisible = true
    },

    onChose(id) {
      console.log('onChose', id)
      // 发选课请求
      choseTheses(this.sid, id).then(res => {
        console.log('发选课请求: ', res)

        this.loadData()
      })
    },

    onDelete(id) {
      console.log('onDelete', id)
      deleteTheses(this.sid, id).then(res => {
        console.log('删除课题：', res)
      })

      this.loadData()
    },

    loadData() {
      getstuTheses(this.sid, 2020).then(res => {
        this.theses = res.data.data
        if (res.data.data.length < 3) {
          this.isbntVisible = true
        }
      })

      getstuToTheses(this.sid, 2020, this.currentPage, this.pagesize).then(res => {
        const pageData = res.data.data

        this.total = pageData.count // 总记录数
        this.totheses = pageData.data // 当前页的数据
      })
    },

    loadChosableTheses() {
      getstuToTheses(this.sid, 2020, this.currentPage, this.pagesize).then(res => {
        const pageData = res.data.data

        this.total = pageData.count // 总记录数
        this.totheses = pageData.data // 当前页的数据
      })
    },

    handleSizeChange: function(size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据

      this.loadChosableTheses()
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.loadChosableTheses()
    }

  }
}
</script>

<style lang="scss" scoped>
  .block{
    margin: 10px;
  }
  .content, .chose{
    margin-top: 20px
  }
</style>

